<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>线性渐变</title>
    <link rel="stylesheet" type="text/css" href="/css/YTSConfig.css">
    <link rel="stylesheet" type="text/css" href="/css/Style.css">
</head>
<body>
    <div class="body SuspensionFixationALLWindow">
        <canvas id="tutorial" class="canvas AbsHorizontalVerticalCenter"
        style="width: 300px; height: 150px;">
            <p>不支持类型内容, 这是一个 HTML Canvas 控件</p>
        </canvas>
    </div>

    <script type="text/javascript">
        var canvas = document.getElementById('tutorial');
        if (!canvas.getContext) {
            alert('不支持 canvas.getContext 意味: 不支持 canvas 属性');
        }
        var ctx = canvas.getContext('2d');

        var radialgradient4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
        radialgradient4.addColorStop(0, '#F4F201');
        radialgradient4.addColorStop(0.8, '#E4C700');
        radialgradient4.addColorStop(1, 'rgba(228, 199, 0, 0)');
        ctx.fillStyle = radialgradient4;
        ctx.fillRect(0, 0, 150, 150);

        var radialgradient3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
        radialgradient3.addColorStop(0, '#00C9FF');
        radialgradient3.addColorStop(0.8, '#00B5E2');
        radialgradient3.addColorStop(1, 'rgba(0, 201, 255, 0)');
        ctx.fillStyle = radialgradient3;
        ctx.fillRect(0, 0, 150, 150);

        var radialgradient2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
        radialgradient2.addColorStop(0, '#FF5F98');
        radialgradient2.addColorStop(0.75, '#FF0188');
        radialgradient2.addColorStop(1, 'rgba(255, 1, 136, 0)');
        ctx.fillStyle = radialgradient2;
        ctx.fillRect(0, 0, 150, 150);

        // 创建渐变
        var radialgradient = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
        radialgradient.addColorStop(0, '#A7D30C');
        radialgradient.addColorStop(0.9, '#019F62');
        radialgradient.addColorStop(1, 'rgba(1, 159, 98, 0)');
        // 画图形
        ctx.fillStyle = radialgradient;
        ctx.fillRect(0, 0, 150, 150);
    </script>
</body>
</html>
